<template>
  <div class="home">
    <!-- 头部 搜索和登录 -->
    <div class="header">
      <div class="logo"></div>
      <div class="searckBox">荣耀X10</div>
      <div class="msgBtn"></div>
      <div class="loginBtn">登录</div>
    </div>
    <!-- 横向滑动导航 -->
    <div class="hs">
      <div class="hsnav">
        <div v-for="(item,index) in homeData.hSList" 
          @click="hsnavClick(index,item)"
          :class="[activeId === index? 'active' : '']" 
          :key="item.id">
          {{item.name}}
        </div>
      </div>
      <div class="moreBtn"></div>
    </div>
    <!-- 轮播图 -->
    <swiper class="swiper1" :options="swiperOption">
  　　<swiper-slide v-for="item in homeData.swiperList" :key="item.id">
        <img :src="item.url" />
      </swiper-slide>
  　　<div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 快速导航 -->
    <div class="quicklink">
      <swiper class="swiper2" :options="swiperOption2">
    　  <swiper-slide>
          <div class="item">
            <div class="icon" style="background-position-x: 0;"></div>
            <span>会员频道</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 11.11%;"></div>
            <span>华为数码</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 22.22%;"></div>
            <span>5G频道</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 33.33%;"></div>
            <span>荣耀数码</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 44.44%;"></div>
            <span>以旧换新</span>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="icon" style="background-position-x: 55.56%;"></div>
            <span>邀请有礼</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 66.67%;"></div>
            <span>直播频道</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 77.78%;"></div>
            <span>众测</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 88.89%;"></div>
            <span>积分商城</span>
          </div>
          <div class="item">
            <div class="icon" style="background-position-x: 100%;"></div>
            <span>生态产品</span>
          </div>
        </swiper-slide>
    　　<div class="swiper-pagination2" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 商城头条 -->
    <div class="headline">
      <div class="title"></div>
      <swiper class="swiper3" :options="swiperOption3">
    　　<swiper-slide v-for="item in homeData.headlineList" :key="item.id">
          <div class="dot"></div>
          {{item.name}}
        </swiper-slide>
      </swiper>
      <div class="more">更多</div>
    </div>
    <!-- 限时购 -->
    <div class="seckill">
      <div class="xianshi">
        <span class="title">限时购</span>
        <img src="../../../../static/images/seckill_title.png" />
        <span class="timer">{{countTimeStr}}</span>
        <span class="over">后结束</span>
      </div>
      <div id="seckillSlider">
        <div class="item" v-for="item in homeData.seckillList" :key="item.id">
          <div class="img-area">
            <img :src="item.imgUrl" />
            <span>{{item.name}}</span>
          </div>
          <div class="price">{{item.price}}</div>
        </div>
      </div>
    </div>
    <!-- 广告区 -->
    <div class="ads">
      <div class="line1">
        <div class="line1_item line1_left">
          <img src="https://res.vmallres.com/pimages//pages/picImages/2DGvPozbqg9IRowpj7pR.png" />
        </div>
        <div class="line1_item line1_right">
          <img src="https://res.vmallres.com/pimages//pages/picImages/LeDKSshHiUI1DhYJF7OR.jpg" />
          <img @click="enterDetail" src="https://res.vmallres.com/pimages//pages/picImages/88JChlZDOEXA5wlUNngl.png" />
        </div>
      </div>
      <div class="line2">
        <img src="https://res.vmallres.com/pimages//pages/picImages/PiWEerbuFDVIcb1YKHQ2.jpg" />
        <img src="https://res.vmallres.com/pimages//pages/picImages/57DSTg4bYe3xbUqA00Gk.png" />
        <img src="https://res.vmallres.com/pimages//pages/picImages/AdFckSdHdFe3dHSvhuh9.jpg" />
        <img src="https://res.vmallres.com/pimages//pages/picImages/rKYXoqGwatcKwexAIFHf.jpg" />
      </div>
      <div class="line3">
        <div class="line3_item">
          <img src="https://res.vmallres.com/pimages//product/6901443387984/428_428_CA16AD0891C031C45C53FB3909E9FF609CCA6C46C2581A76mp.png" />
          <div class="title">HUAWEI nova 7 SE 5G</div>
          <div class="promotion">享6期免息|整点赠手环</div>
          <div class="price">
            <span>¥2399</span>
          </div>
        </div>
        <div class="line3_item">
          <img src="https://res.vmallres.com/pimages//product/6901443356904/428_428_FF89E07076590562DF095FCD47FD0C824121FD0D89A445CEmp.png" />
          <div class="title">荣耀V30</div>
          <div class="promotion">最高优惠800元</div>
          <div class="price">
            <span>¥2499</span>
            <del>¥3299</del>
          </div>
        </div>
        <div class="line3_item">
          <img src="https://res.vmallres.com/pimages//product/6901443354962/428_428_83E26E25EA9423FB41DCC2769579FBA747AD844EF9D08041mp.png" />
          <div class="title">华为畅享10</div>
          <div class="promotion">最高优惠200</div>
          <div class="price">
            <span>¥1299</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 精品推荐 -->
    <!-- <div class="goodsRecommend">
      <ListCard />
    </div> -->
    <!-- 楼层区域 -->
    <div class="goodsList">
      <ListCard v-for="item in homeData.goodsList" :listData="item" :key="item.id" />
    </div>
    <!-- 登录 反馈 -->
    <BottomArea />
    <Tarbar :activeIndex=0></Tarbar>
  </div>
</template>

<script>
import Tarbar from '../../common/tarbar'
import BottomArea from '../../common/bottom'
import ListCard from './listCard'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css';
export default {
  name: 'home',
  components: {
    Tarbar,
    swiper,
    swiperSlide,
    ListCard,
    BottomArea
  },
  data () {
    return {
      homeData: {},
      activeId: 0,
      swiperOption: {
        direction : 'horizontal',
    　  pagination: {
  　　　　 el: '.swiper-pagination',
  　　　　 clickable: true, // 允许点击小圆点跳转
          bulletClass: 'bulletClass1',
          bulletActiveClass: 'bulletActiveClass1'
    　　},
    　　autoplay: {
    　　　　delay: 3000,
    　　　　disableOnInteraction: false 
    　　},
    　　loop: true,
      },
      swiperOption2: {
        direction : 'horizontal',
    　  pagination: {
  　　　　 el: '.swiper-pagination2',
  　　　　 clickable: true, // 允许点击小圆点跳转
          bulletClass: 'bulletClass2',
          bulletActiveClass: 'bulletActiveClass2'
    　　},
    　　autoplay: false,
    　　loop: false,
      },
      swiperOption3: {
        direction : 'vertical',
    　　autoplay: {
    　　　　delay: 3000,
    　　　　disableOnInteraction: false 
    　　},
    　　loop: true,
      },
      countTimeStr: '00:00:00',
    }
  },
  methods: {
    // 获取首页数据
    async getHomeData(){
      this.homeData = await this.$http.get('../../../../static/mock/home.json');
    },
    hsnavClick(index,item){
      this.activeId = index;
      if (index !== 0) {
        this.$router.push(item.path);
      }
    },
    // 去详情页面
    enterDetail(){
      this.$router.push('/detail');
    },
    // 倒计时
    countTime(){
      // https://www.cnblogs.com/maqingyuan/p/8452012.html
      //获取当前时间
      let date = new Date();
      let now = date.getTime();
      //设置截止时间
      let str="2020/8/30 00:00:00";
      let endDate = new Date(str);
      let end = endDate.getTime();

      //时间差
      let leftTime = end-now;
      //定义变量 h,m,s保存倒计时的时间
      let d,h,m,s;
      if (leftTime>=0) {
          d = Math.floor(leftTime/1000/60/60/24);
          h = Math.floor(leftTime/1000/60/60%24);
          m = Math.floor(leftTime/1000/60%60);
          s = Math.floor(leftTime/1000%60);
      }
      //将0-9的数字前面加上0，例1变为01
      d = this.checkTime(d);
      h = this.checkTime(h);
      m = this.checkTime(m);
      s = this.checkTime(s);
      this.countTimeStr = d+ '天' + h +":" + m +":" + s;
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime,1000);
    },
    checkTime(i){
      if (i<10) {
        i = "0"+i;
      }
      return i;
    }
  },
  mounted() {
    this.getHomeData();
    this.countTime();
  }
}
</script>

<style scoped lang="scss">
.home{
  margin-bottom: 110px;
  background-color: white;
  .header{
    height: 76px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    div{
      height: 66px;
      line-height: 66px;
    }
    .logo{
      width: 130px;
      background-image: url(../../../../static/images/logo_vmall.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 122px 26px;
    }
    .searckBox{
      width: 320px;
      font-size: 26px;
      color: #b3b3b3;
      text-align: left;
      background-color: rgba(155,155,155,.1);
      border-radius: 33px;
      padding-left: 80px;
      background-image: url(../../../../static/images/search.png);
      background-position: 20px center;
      background-repeat: no-repeat;
      background-size: 32px 32px;
    }
    .msgBtn{
      width: 64px;
      background-image: url(../../../../static/images/icon_message_black.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 48px 48px;
    }
    .loginBtn{
      width: 80px;
      font-size: 30px;
      color: #4c4c4c;
      text-align: left;
    }
  }
  .hs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-right: 16px;
    height: 70px;
    line-height: 70px;
    align-items: center;
    width: 100%;
    .hsnav{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      font-size: 30px;
      overflow-x: scroll;
      width: calc(100% - 80px);
      white-space: nowrap;
      height: 70px;
      div{
        height: 50px;
        padding-bottom: 9px;
        margin: 0 30px;
        color: #777;
      }
      .active{
        color: #cc0e11;
        border-bottom: solid 4px #cc0e11;
      }
    }
    .moreBtn{
      width: 62px;
      height: 62px;
      background-image: url(../../../../static/images/more_down.png);
      background-position: 10px center;
      background-repeat: no-repeat;
      background-size: 20px 12px;
    }
  }
  .swiper1{
    width: 100%;
    height: 320px;
    .swiper-wrapper{
      width: 100%;
      height: 100%;
      .swiper-slide{
        img{
          height: 320px;
          width: 730px;
          border-radius: 10px;
        }
      }
    }
    .swiper-pagination{
      text-align: right;
    }
  }
  .quicklink{
    height: 156px;
    width: 100%;
    padding-top: 80px;
    background-image: url(../../../../static/images/bg-home-squard.png);
    background-position: center 12px;
    background-repeat: no-repeat;
    background-size: cover;
    .swiper2{
      width: 100%;
      height: 108spx;
      .swiper-wrapper{
        width: 100%;
        height: 100%;
        .swiper-slide{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          .item{
            width: 20%;
            font-size: 24px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            .icon{
              width: 62px;
              height: 62px;
              background-image: url(../../../../static/images/spriteImg.png);
              background-repeat: no-repeat;
              background-size: cover;
              margin: 0 auto;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
  .headline{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin: 0 36px;
    height: 82px;
    .title{
      width: 100px;
      height: 82px;
      background-image: url(../../../../static/images/logo_wapHeadNews.png);
      background-position: center 22px;
      background-repeat: no-repeat;
      background-size: 100px 26px;
    }
    .swiper3{
      width: 480px;
      height: 82px;
      .swiper-wrapper{
        .swiper-slide{
          height: 82px;
          line-height: 82px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 25px;
          color: #4d4d4d;
          text-align: left;
          .dot{
            background-color: rgba(155,155,155,.5);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 6px;
          }
        }
      }
    }
    .more{
      width: 60px;
      line-height: 82px;
      text-align: center;
      color: #999;
      font-size: 20px;
    }
  }
  .seckill{
    background-image: linear-gradient(-180deg, #F9F9F9 0%, #FFFFFF 100%);
    padding-left: 13px;
    .xianshi{
      height: 80px;
      line-height: 80px;
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center;
      font-size: 36px;
      .title{
        color: #4d4d4d;
      }
      img{
        width: 30px;
        height: 30px;
        margin: 0 6px;
      }
      .timer{
        color: #4d4d4d;
        font-weight: 500;
      }
      .over{
        color: #9b9b9b;
        font-size: 24px;
      }
    }
    #seckillSlider{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
      &::-webkit-scrollbar{
        display: none;
      }
      .item{
        width: 158px;
        margin-right: 10px;
        .img-area{
          width: 158px;
          height: 160px;
          border-radius: 10px;
          background-color: white;
          padding: 10px 0;
          box-shadow: 0 0.25rem 0.5rem 0 rgba(0,0,0,.05);
          img{
            width: 126px;
            height: 126px;
          }
          span{
            display: inline-block;
            margin: 0 8px;
            text-align: center;
            font-size: 24px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
      .price{
        margin-top: 10px;
        word-break: break-all;
        white-space:nowrap;
        overflow: hidden;
        max-width: 158px;
        color: #ca141d;
        font-size: 22px;
      }
    }
  }
  .ads{
    margin-top: 20px;
    .line1{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      .line1_item{
        width: 50%;
        height: 510px;
        img{
          width: 100%;
        }
      }
      .line1_right{
        height: 255px;
      }
    }
    .line2{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      img{
        width: 50%;
        height: 255px;
      }
    }
    .line3{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      padding: 0 8px;
      margin-top: 2px;
      .line3_item{
        margin: 0 2px;
        background-color: #f9f9f9;
        text-align: center;
        width: 33.33%;
        flex-grow: 0;
        border-radius: 0 0 10px 10px;
        img{
          width: 144px;
          height: 144px;
          padding: 18px;
        }
        .title{
          color: #333;
          font-weight: 400;
          font-size: 28px;
          font-style: normal;
        }
        .promotion{
          color: #9b9b9b;
          font-size: 24px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.2;
          margin: 6px 12px;
        }
        .price{
          font-size: 24px;
          padding-bottom: 20px;
          span{
            color: #333;
          }
          del{
            color: #999;
            padding-left: 8px;
          }
        }
      }
    }
  }
}
</style>

<style>
.swiper-pagination .bulletClass1{
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
  background: transparent;
  border: solid 1px #ffffff;
  opacity: 1;
  margin: 0 8px;
}
.swiper-pagination .bulletActiveClass1{
  background: #ffffff;
  border: solid 1px #ffffff;
}
.bulletClass1:last-of-type{
  margin-right: 30px !important;
}


.swiper-pagination2{
  height: 32px;
  text-align: center;
}
.swiper-pagination2 .bulletClass2{
  opacity: 1;
  display: inline-block;
  width: 16px;
  height: 4px;
  background-color: #e5e5e5;
  margin: 0 6px;
}
.swiper-pagination2 .bulletActiveClass2{
  background-color: #777777;
}
</style>
